import React, { useRef, useState } from 'react';
import { DrawerForm, ModalForm, ProFormInstance, ProFormSelect, ProFormTextArea } from '@ant-design/pro-components';
import { Button, Typography, message } from 'antd';
import {
    CheckCircleOutlined,
    ExclamationCircleOutlined,
} from '@ant-design/icons';
import { manageRecord } from '@/services/api/api-instruct-record';
interface manageRecordProps {
    type: 'botton' | 'text'
    title: string
    id: string
    onRefurbish: () => void
}
export const ManageRecord: React.FC<manageRecordProps> = ({ type, title, id, onRefurbish }) => {
    const formRef = useRef<ProFormInstance>();
    return <>
        <ModalForm
            key={'modal_form_add_submit'}
            title={
                <>
                    审批指令--{title}
                </>
            }
            formRef={formRef}
            trigger={type === 'text' ? <a>审批</a> : <Button type='primary' style={{ marginLeft: 10 }} >审批</Button>}
            autoFocusFirstInput
            modalProps={{
                width: 400,
                destroyOnClose: true,
            }}
            submitTimeout={2000}
            submitter={{
                // searchConfig: {
                //     resetText: '退回',
                //     submitText: '通过',
                // },
                // resetButtonProps: {
                //     type: 'primary',
                //     style: { background: '#f50' },
                //     onClick: (e) => {
                //         console.log(e);
                //     }
                // },
                // submitButtonProps: {
                //     type: 'primary',
                //     style: { background: '#87d068' },
                //     onClick: (e) => {
                //         console.log(e);
                //     }
                // },
                render: (props, doms) => {
                    return [
                        <Button
                            type="primary"
                            key="rest"
                            style={{ background: '#f50' }}
                            onClick={() => { formRef.current?.setFieldsValue({type:2}), props.form?.submit?.() }}
                        >
                            退回
                        </Button>,
                        <Button
                            type="primary"
                            key="submit"
                            style={{ background: '#87d068' }}
                            onClick={() => { formRef.current?.setFieldsValue({type:1}), props.form?.submit?.() }}
                        >
                            通过
                        </Button>,
                    ];
                },
            }}
            onFinish={async (val) => {
                // props.submit();
                const examine = formRef.current?.getFieldValue('type')
                const res = await manageRecord({ id, examine })
                if (res.code === 0) {
                    message.success('审批成功')
                } else {
                    message.error('审批失败')
                }
                onRefurbish()
                return true;
            }}
        >
            <ProFormSelect
                name="type"
                label="type"
                hidden
                valueEnum={{
                    1: '通过',
                    2: '退回',
                }}
            />

            {/* <Typography.Paragraph>
                <blockquote>{status==='pass'?"通过":"退回"}，以下是备注</blockquote>
            </Typography.Paragraph>
            <ProFormTextArea
                name="remarks"
                label={
                    <span
                        style={{
                            marginLeft: 11,
                        }}
                    >
                        备注
                    </span>
                }
                width="xl"
                fieldProps={{
                    rows: 6,
                    allowClear: true,
                    maxLength: 50000,
                    placeholder: '请输入备注（支持换行输入）',
                    showCount: true,
                }}
            /> */}

        </ModalForm>
    </>;
};